<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
  </style>
</head>
<body>
  <div id="app">
    <!-- 步骤1-绘制静态的页面 -->
    <!-- 省 -->
    <!-- 步骤7-渲染下拉 -->
    <!-- 步骤8-实现下拉的联动,选择了省,给市列表添加数据 -->
    <select v-model="provinceCode" @change="setCityList">
        <option v-for="(item, index) in provinceList" :key="index" :value="item.value">{{item.label}}</option>
    </select>
    <!-- 市 -->
    <select  v-model="cityCode"  @change="setAreaList">
        <option v-for="(item, index) in cityList" :key="index" :value="item.value">{{item.label}}</option>
    </select>
    <!-- 区 -->
    <select v-model="areaCode">
        <option v-for="(item, index) in areaList" :key="index" :value="item.value">{{item.label}}</option>
    </select>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

  <script src="https://cdn.jsdelivr.net/npm/element-china-area-data/dist/element-china-area-data.iife.js"></script>
  <!-- 步骤3-方式1-不通过接口,去npm上面找省市区数据 -->
  <!-- https://www.npmjs.com/package/element-china-area-data -->
  <!-- 步骤4-学习它的使用,非常非常难,但是需要的基础知识大家是有的 -->
  <!-- 难在读它的代码 -->
  <!-- element-china-area-data.cjs: commonjs,nodejs的模块化语法
       element-china-area-data.d.ts: typescript语法,在vue3的时候会讲,浏览器不能直接使用
       element-china-area-data.iife.js 立即执行函数,浏览器本身就支持(推荐浏览器直接使用)
       element-china-area-data.mjs: es6模块化语法
-->
  <!-- 步骤5-引入
        方式1-下载这个文件https://github.com/Plortinus/element-china-area-data/blob/master/dist/element-china-area-data.iife.js
        方式2-直接在线引入
        https://www.jsdelivr.com/,提供把npm上面所有资源,在线方式
        语法:
        https://cdn.jsdelivr.net/npm/包的名称@版本号/具体文件

        https://cdn.jsdelivr.net/npm/element-china-area-data/dist/element-china-area-data.iife.js
-->
<!-- 步骤6-读取里面数据
树形结构    
elementChinaAreaData = {
    regionData: [
        //最外层是省
        {value,label:'四川省',children: [
            {value,label: '成都市', children: [
                {value,label:'青羊区'}
            ]}
        ]}
    ]
}

-->
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        //步骤2-定义数据
        provinceCode: undefined,//省的选中值
        cityCode: undefined,//市的选中值
        areaCode: undefined,//区的选中值
        provinceList: elementChinaAreaData.regionData, //待选列表
        cityList: [],
        areaList: []
      },
      methods: {
        setCityList(){
            //当前选中的省的value-this.provinceCode
            //所有的省-provinceCode
            //当前省的的市在哪里?
            //市在省的children
            let currentProvince = this.provinceList.find(t=> t.value === this.provinceCode)
            console.log('currentProvince', currentProvince)
            this.cityList = currentProvince.children
        },
        setAreaList(){
            let currentCity = this.cityList.find(t=> t.value === this.cityCode)
            this.areaList = currentCity.children
        }
      }
    })
  </script>
</body>
</html>